<template>
  <div class="step-card" :class="stepCardClass">
    <div class="step-header">
      <!-- 步骤图标和状态 -->
      <div class="step-icon">
        <div class="icon-wrapper" :style="{ backgroundColor: statusColor }">
          <i :class="statusIcon"></i>
        </div>
      </div>
      
      <!-- 步骤信息 -->
      <div class="step-info">
        <h4 class="step-title">{{ step.name }}</h4>
        <p class="step-message" v-if="step.message">{{ step.message }}</p>
      </div>
      
      <!-- 执行时间 -->
      <div class="step-time" v-if="executionTime">
        <small>{{ executionTime }}</small>
      </div>
    </div>
    
    <!-- 操作按钮 (手动模式) -->
    <div class="step-actions" v-if="mode === 'manual' && showActions">
      <button 
        class="btn btn-execute"
        :disabled="!canExecute"
        @click="handleExecute"
        v-if="step.status === 'pending'"
      >
        执行
      </button>
      
      <button 
        class="btn btn-retry"
        @click="handleRetry"
        v-if="step.status === 'error'"
      >
        重试
      </button>
      
      <button 
        class="btn btn-skip"
        :disabled="!canSkip"
        @click="handleSkip"
        v-if="step.status === 'error' && canSkip"
      >
        跳过
      </button>
    </div>
    
    <!-- 步骤详情 (可折叠) -->
    <div class="step-details" v-if="showDetails && (step.data || step.error)">
      <div class="details-toggle" @click="detailsExpanded = !detailsExpanded">
        <span>详细信息</span>
        <i :class="detailsExpanded ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
      </div>
      
      <div class="details-content" v-if="detailsExpanded">
        <!-- 成功时显示数据 -->
        <div v-if="step.data && step.status === 'success'" class="success-details">
          <pre>{{ formatStepData(step.data) }}</pre>
        </div>
        
        <!-- 错误时显示错误信息 -->
        <div v-if="step.error && step.status === 'error'" class="error-details">
          <div class="error-message">
            <strong>错误信息:</strong>
            <p>{{ step.error }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { STEP_STATUS } from '../../services/imageUpdateService.js'

export default {
  name: 'StepCard',
  props: {
    step: {
      type: Object,
      required: true
    },
    mode: {
      type: String,
      default: 'auto'
    },
    showActions: {
      type: Boolean,
      default: true
    },
    showDetails: {
      type: Boolean,
      default: true
    },
    canExecute: {
      type: Boolean,
      default: false
    },
    canSkip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      detailsExpanded: false
    }
  },
  computed: {
    stepCardClass() {
      return [
        `step-${this.step.status}`,
        { 'step-expandable': this.showDetails && (this.step.data || this.step.error) }
      ]
    },
    statusColor() {
      const colors = {
        [STEP_STATUS.PENDING]: '#d4d4d8',
        [STEP_STATUS.RUNNING]: '#3b82f6',
        [STEP_STATUS.SUCCESS]: '#10b981',
        [STEP_STATUS.ERROR]: '#ef4444',
        [STEP_STATUS.SKIPPED]: '#f59e0b'
      }
      return colors[this.step.status] || '#6b7280'
    },
    statusIcon() {
      const icons = {
        [STEP_STATUS.PENDING]: 'fas fa-clock',
        [STEP_STATUS.RUNNING]: 'fas fa-spinner fa-spin',
        [STEP_STATUS.SUCCESS]: 'fas fa-check',
        [STEP_STATUS.ERROR]: 'fas fa-times',
        [STEP_STATUS.SKIPPED]: 'fas fa-forward'
      }
      return icons[this.step.status] || 'fas fa-question'
    },
    executionTime() {
      if (!this.step.startTime) return ''
      
      const start = new Date(this.step.startTime)
      const end = this.step.endTime ? new Date(this.step.endTime) : new Date()
      const diffMs = end - start
      
      if (diffMs < 1000) {
        return `${diffMs}ms`
      } else if (diffMs < 60000) {
        return `${(diffMs / 1000).toFixed(1)}s`
      } else {
        const minutes = Math.floor(diffMs / 60000)
        const seconds = Math.floor((diffMs % 60000) / 1000)
        return `${minutes}m ${seconds}s`
      }
    }
  },
  methods: {
    handleExecute() {
      this.$emit('execute', this.step.type)
    },
    handleRetry() {
      this.$emit('retry', this.step.type)
    },
    handleSkip() {
      this.$emit('skip', this.step.type)
    },
    formatStepData(data) {
      if (!data) return ''
      
      try {
        return JSON.stringify(data, null, 2)
      } catch (e) {
        return String(data)
      }
    }
  }
}
</script>

<style scoped>
.step-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  background: white;
  transition: all 0.3s ease;
}

.step-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.step-card.step-running {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.step-card.step-success {
  border-color: #10b981;
}

.step-card.step-error {
  border-color: #ef4444;
}

.step-card.step-skipped {
  border-color: #f59e0b;
  opacity: 0.8;
}

.step-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.step-icon .icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

.step-info {
  flex: 1;
}

.step-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.step-message {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

.step-time {
  color: #9ca3af;
  font-size: 12px;
}

.step-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.btn {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-execute {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.btn-execute:hover:not(:disabled) {
  background: #2563eb;
}

.btn-retry {
  background: #f59e0b;
  color: white;
  border-color: #f59e0b;
}

.btn-retry:hover {
  background: #d97706;
}

.btn-skip {
  background: #6b7280;
  color: white;
  border-color: #6b7280;
}

.btn-skip:hover:not(:disabled) {
  background: #4b5563;
}

.step-details {
  margin-top: 12px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}

.details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 0;
  font-size: 14px;
  color: #6b7280;
}

.details-toggle:hover {
  color: #374151;
}

.details-content {
  margin-top: 8px;
}

.success-details pre {
  background: #f3f4f6;
  padding: 12px;
  border-radius: 4px;
  font-size: 12px;
  overflow-x: auto;
  margin: 0;
}

.error-details {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 12px;
}

.error-message strong {
  color: #dc2626;
}

.error-message p {
  margin: 4px 0 0 0;
  color: #374151;
  font-size: 14px;
}
</style>